body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    background: #0a0a0a;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    color: #3f3f3f;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.center {
    display: flex;
    flex-wrap: wrap;

    span {
        width: 20px;
        height: 20px;
        /* background: #fff3; */
        position: relative;

        &:before {
            content: '';
            width: 100%;
            height: 100%;
            border-radius: 50%;
            position: absolute;
            background: #243897;
            transform: scale(0.2);
            box-shadow: 0 0 10px #243897, 0 0 20px #243897, 0 0 40px #243897,
                0 0 60px #243897, 0 0 80px #243897;
            pointer-events: none;
            transition: all 2.5s ease-in-out;
        }

        &:hover:before {
            transform: scale(0.8);
            transition: all 0s;
        }
    }
}
